<template>
	<view class="push-container">
		<view class="header">
			<text class="title">推文广场</text>
			
		</view>
		
		<view class="content">
			<view class="push-list">
				<view class="push-item" v-for="(item, index) in pushList" :key="item.id" @click="viewPushDetail(item)">
					<view class="push-header">
						<view class="user-info">
							<image class="avatar" :src="getAvatarUrl(item.publisherAvatar)" mode="aspectFill"></image>
							<view class="user-details">
								<text class="username">{{ item.publisherName || '用户' }}</text>
								<text class="publish-time">{{ formatTime(item.createdAt) }}</text>
							</view>
						</view>
						<view class="push-actions">
							<view class="action-btn" @click.stop="toggleLike(item)">
								<text class="icon" :class="{ 'liked': item.isLiked }">{{ item.isLiked ? '❤️' : '🤍' }}</text>
								<text class="count">{{ item.likeCount || 0 }}</text>
							</view>
							<view class="action-btn" @click.stop="showCommentInput(item)">
								<text class="icon">💬</text>
								<text class="count">{{ item.commentCount || 0 }}</text>
							</view>
						</view>
					</view>
					
					<view class="push-content">
						<view class="cover-wrapper" v-if="item.coverImage">
							<image class="cover-image" :src="getImageUrl(item.coverImage)" mode="aspectFill" @click.stop="previewImage([item.coverImage], 0)"></image>
						</view>
						<text class="push-text">{{ item.content }}</text>
						<view class="push-images" v-if="item.images && item.images.length > 0">
							<image 
								v-for="(img, imgIndex) in item.images" 
								:key="imgIndex" 
								:src="getImageUrl(img)" 
								mode="aspectFill"
								@click.stop="previewImage(item.images, imgIndex)"
								class="push-image"
							></image>
						</view>
					</view>
					
					<view class="push-footer">
						<text class="view-count">👁️ {{ item.viewCount || 0 }} 次浏览</text>
					</view>
				</view>
			</view>
			
			<view class="empty-state" v-if="pushList.length === 0 && !loading">
				<view class="empty-icon">📝</view>
				<text class="empty-text">暂无推文</text>
				<text class="empty-desc">快来发布第一条推文吧！</text>
			</view>
			
			<view class="loading-state" v-if="loading">
				<text class="loading-text">加载中...</text>
			</view>
			
			<view class="load-more" v-if="hasMore && !loading">
				<text class="load-more-text" @click="loadMore">加载更多</text>
			</view>
		</view>
		
		<!-- 评论输入框 -->
		<view class="comment-input-modal" v-if="showCommentModal" @click="hideCommentInput">
			<view class="comment-input-container" @click.stop>
				<view class="comment-input-header">
					<text class="comment-title">发表评论</text>
					<view class="close-btn" @click="hideCommentInput">✕</view>
				</view>
				<textarea 
					class="comment-textarea" 
					v-model="commentContent" 
					placeholder="写下你的评论..."
					maxlength="200"
				></textarea>
				<view class="comment-input-footer">
					<text class="char-count">{{ commentContent.length }}/200</text>
					<button class="submit-btn" @click="submitComment" :disabled="!commentContent.trim()">发送</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getAvatarUrl, getImageUrl } from '../../utils/imageUtils.js'

export default {
	data() {
		return {
			pushList: [],
			currentPage: 1,
			pageSize: 10,
			hasMore: true,
			loading: false,
			showCommentModal: false,
			commentContent: '',
			currentPush: null,
			keyboardHeight: 0
		}
	},
	
	onLoad() {
		this.loadPushList();
	},
	
	onPullDownRefresh() {
		this.refreshList();
	},
	
	onReachBottom() {
		if (this.hasMore && !this.loading) {
			this.loadMore();
		}
	},
	
	methods: {
		// 获取头像URL
		getAvatarUrl(avatar) {
			return getAvatarUrl(avatar);
		},
		
		// 获取图片URL
		getImageUrl(imageUrl) {
			return getImageUrl(imageUrl);
		},

		// 加载推文列表
		async loadPushList() {
			if (this.loading) return;
			
			this.loading = true;
			try {
				const response = await this.$http.get('/user/push/list', {
					params: {
						current: this.currentPage,
						size: this.pageSize
					}
				});
				
				if (response.code === 200) {
					const { records, total, current, size } = response.data;
					
					if (this.currentPage === 1) {
						this.pushList = records;
					} else {
						this.pushList = [...this.pushList, ...records];
					}
					
					this.hasMore = this.pushList.length < total;
				} else {
					uni.showToast({
						title: response.message || '加载失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('加载推文列表失败:', error);
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				});
			} finally {
				this.loading = false;
				uni.stopPullDownRefresh();
			}
		},
		
		// 刷新列表
		refreshList() {
			this.currentPage = 1;
			this.hasMore = true;
			this.loadPushList();
		},
		
		// 加载更多
		loadMore() {
			if (this.hasMore && !this.loading) {
				this.currentPage++;
				this.loadPushList();
			}
		},
		
		// 查看推文详情
		viewPushDetail(push) {
			uni.navigateTo({
				url: `/pages/push/push-detail?id=${push.id}`
			});
		},
		
		// 点赞/取消点赞
		async toggleLike(push) {
			try {
				if (push.isLiked) {
					// 取消点赞
					const response = await this.$http.post('/user/push/unlike', {
						pushId: push.id
					});
					
					if (response.code === 200) {
						push.isLiked = false;
						push.likeCount = Math.max(0, (push.likeCount || 1) - 1);
						uni.showToast({
							title: '已取消点赞',
							icon: 'success'
						});
					}
				} else {
					// 点赞
					const response = await this.$http.post('/user/push/like', {
						pushId: push.id
					});
					
					if (response.code === 200) {
						push.isLiked = true;
						push.likeCount = (push.likeCount || 0) + 1;
						uni.showToast({
							title: '点赞成功',
							icon: 'success'
						});
					}
				}
			} catch (error) {
				console.error('操作失败:', error);
				uni.showToast({
					title: '操作失败，请重试',
					icon: 'none'
				});
			}
		},
		
		// 显示评论输入框
		showCommentInput(push) {
			this.currentPush = push;
			this.commentContent = '';
			this.showCommentModal = true;
		},
		
		// 隐藏评论输入框
		hideCommentInput() {
			this.showCommentModal = false;
			this.currentPush = null;
			this.commentContent = '';
		},
		
		// 提交评论
		async submitComment() {
			if (!this.commentContent.trim()) return;
			
			try {
				const response = await this.$http.post('/user/push/comment', {
					pushId: this.currentPush.id,
					content: this.commentContent.trim()
				});
				
				if (response.code === 200) {
					uni.showToast({
						title: '评论成功',
						icon: 'success'
					});
					
					// 更新评论数
					this.currentPush.commentCount = (this.currentPush.commentCount || 0) + 1;
					
					this.hideCommentInput();
				} else {
					uni.showToast({
						title: response.message || '评论失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('评论失败:', error);
				uni.showToast({
					title: '评论失败，请重试',
					icon: 'none'
				});
			}
		},
		
		// 预览图片
		previewImage(images, current) {
			uni.previewImage({
				urls: images,
				current: images[current]
			});
		},
		
		// 跳转到创建推文页面
		navigateToCreate() {
			uni.navigateTo({
				url: '/pages/push/create-push'
			});
		},
		
		// 格式化时间
		formatTime(timestamp) {
			if (!timestamp) return '';
			
			const now = new Date();
			const date = new Date(timestamp);
			const diff = now - date;
			
			const minute = 60 * 1000;
			const hour = 60 * minute;
			const day = 24 * hour;
			
			if (diff < minute) {
				return '刚刚';
			} else if (diff < hour) {
				return Math.floor(diff / minute) + '分钟前';
			} else if (diff < day) {
				return Math.floor(diff / hour) + '小时前';
			} else if (diff < 7 * day) {
				return Math.floor(diff / day) + '天前';
			} else {
				return date.toLocaleDateString();
			}
		},

		// 监听键盘高度变化
		onKeyboardHeightChange(e) {
			this.keyboardHeight = e.detail.height;
		}
	}
}
</script>

<style lang="scss" scoped>
.push-container {
	min-height: 100vh;
	background: #f5f5f5;
}

.header {
	background: #ffffff;
	padding: 40rpx;
	border-bottom: 1rpx solid #f0f0f0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	.title {
		font-size: 36rpx;
		color: #333333;
		font-weight: bold;
	}
	
	.header-actions {
		display: flex;
		gap: 20rpx;
		
		.action-btn {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			background: #f0f0f0;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.icon {
				font-size: 28rpx;
			}
		}
	}
}

.content {
	padding: 20rpx;
}

.push-list {
	.push-item {
		background: #ffffff;
		border-radius: 15rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		
		.push-header {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			margin-bottom: 20rpx;
			
			.user-info {
				display: flex;
				align-items: center;
				
				.avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}
				
				.user-details {
					.username {
						display: block;
						font-size: 28rpx;
						color: #333333;
						font-weight: bold;
						margin-bottom: 8rpx;
					}
					
					.publish-time {
						font-size: 22rpx;
						color: #999999;
					}
				}
			}
			
			.push-actions {
				display: flex;
				gap: 30rpx;
				
				.action-btn {
					display: flex;
					flex-direction: column;
					align-items: center;
					gap: 8rpx;
					
					.icon {
						font-size: 32rpx;
						
						&.liked {
							color: #ff4757;
						}
					}
					
					.count {
						font-size: 22rpx;
						color: #666666;
					}
				}
			}
		}
		
		.push-content {
			margin-bottom: 20rpx;
			
			.push-text {
				font-size: 28rpx;
				color: #333333;
				line-height: 1.6;
				margin-bottom: 20rpx;
			}
			
			.push-images {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 10rpx;
				
				.push-image {
					width: 100%;
					height: 200rpx;
					border-radius: 10rpx;
				}
			}
		}
		
		.push-footer {
			.view-count {
				font-size: 22rpx;
				color: #999999;
			}
		}
	}
}

.empty-state {
	text-align: center;
	padding: 100rpx 40rpx;
	
	.empty-icon {
		font-size: 120rpx;
		margin-bottom: 30rpx;
	}
	
	.empty-text {
		display: block;
		font-size: 28rpx;
		color: #999999;
		margin-bottom: 20rpx;
	}
	
	.empty-desc {
		font-size: 24rpx;
		color: #cccccc;
	}
}

.loading-state {
	text-align: center;
	padding: 40rpx;
	
	.loading-text {
		font-size: 26rpx;
		color: #999999;
	}
}

.load-more {
	text-align: center;
	padding: 40rpx;
	
	.load-more-text {
		font-size: 26rpx;
		color: #007aff;
		padding: 20rpx 40rpx;
		border: 1rpx solid #007aff;
		border-radius: 25rpx;
	}
}

.comment-input-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: flex-end;
	z-index: 999;
	
	.comment-input-container {
		background: #ffffff;
		width: 100%;
		border-radius: 20rpx 20rpx 0 0;
		padding: 30rpx;
		
		.comment-input-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			
			.comment-title {
				font-size: 28rpx;
				color: #333333;
				font-weight: bold;
			}
			
			.close-btn {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				background: #f0f0f0;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #666666;
			}
		}
		
		.comment-textarea {
			width: 100%;
			height: 120rpx;
			border: 1rpx solid #e0e0e0;
			border-radius: 10rpx;
			padding: 20rpx;
			font-size: 26rpx;
			margin-bottom: 20rpx;
		}
		
		.comment-input-footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.char-count {
				font-size: 22rpx;
				color: #999999;
			}
			
			.submit-btn {
				background: #007aff;
				color: #ffffff;
				border: none;
				padding: 15rpx 30rpx;
				border-radius: 25rpx;
				font-size: 26rpx;
				
				&:disabled {
					background: #cccccc;
				}
			}
		}
	}
}
</style> 